<template>
  <el-container class="matter-transact">
    <el-main>
      <div class="matter-transact-msg">
        <el-descriptions title="事项信息" :column="3" border>
          <el-descriptions-item
            label="事项名称"
            label-align="center"
            align="center"
            span="3"
          >{{ msgData.matter.matterName }}</el-descriptions-item>
          <el-descriptions-item
            label="所属部门"
            label-align="center"
            align="center"
          >{{ msgData.matter.dept.deptName }}</el-descriptions-item>
          <el-descriptions-item
            label="事项开始时间"
            label-align="center"
            align="center"
          >{{ moment(msgData.createdDate).format("YYYY-MM-DD HH:mm:ss") }}</el-descriptions-item>
          <el-descriptions-item
            label="事项结束时间"
            label-align="center"
            align="center"
          >{{ moment(msgData.updatedDate).format("YYYY-MM-DD HH:mm:ss") }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="matter-transact-form" v-if="completeFlow.length">
        <div class="matter-transact-form-title">表单记录</div>
        <CustomFormSubmit v-for="form in completeFlow" :submitId="form.customFormSubmitId"></CustomFormSubmit>
      </div>
    </el-main>
  </el-container>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import moment from "moment";
import { ElMessage } from "element-plus";
import CustomFormSubmit from "../components/flow-design/custom-form-submit.vue";
import matterSubmitApi from "@/api/matter-submit.api"
export default defineComponent({
  name: "MatterTransactDetail",
  components: { CustomFormSubmit },
  data() {
    return {
      matterSubmitId: this.$route.query.id as string,
      msgData: {
        createdDate: "",
        updatedDate: "",
        matter: {
          matterName: "",
          dept: {
            deptName: ""
          }
        }
      },
      completeFlow: [] as any
    }
  },
  methods: {
    moment: moment,
    loadData() {
      matterSubmitApi.findOne(this.matterSubmitId).then((res: any) => {
        const { code, content } = res.data;
        if (code === 0) {
          this.msgData = content.result;
          this.completeFlow = content.completeFlow;
        }
      })
    },
  },
  mounted() {
    this.loadData();
  }
})
</script>

<style lang="scss" scoped>
.matter-transact {
  padding: 20px;
  width: 100%;
  height: 100%;
  &-msg {
    width: 100%;
  }
  &-form {
    &-title {
      color: #303133;
      font-weight: 700;
      margin: 20px 0;
    }
  }
  &-operation {
    text-align: center;
  }
}
</style>
